<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web App用组件方式开发全站</title>
</head>
<body>
<div class="learn-course-list">

    <div class="list-item">
        <h3>
            第1章 课程前期准备
        </h3>
        <ul>
            <li class="finished">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=101">
                    1-1 课程介绍 (05:38) </a>


                <i class="sz-full iright pink"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=103">
                    1-2 课程安排 (01:37) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=104">
                    1-3 WEB项目开发流程介绍 (04:03) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=105">
                    1-4 开发角色缩写简介 (02:13) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=230">
                    1-5 产品设计 (03:49) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=231">
                    1-6 开发规划 (04:46) </a>


                <i class="sz-empty iright"></i>
            </li>
        </ul>
    </div>
    <div class="list-item">
        <h3>
            第2章 前端开发简介及标注与切图
        </h3>
        <ul>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=110">
                    2-1 前端开发内容介绍 (01:55) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=168">
                    2-2 标注简介 (02:20) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=107">
                    2-3 标注 (15:43) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=169">
                    2-4 切图（一） (09:16) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=109">
                    2-5 切图（二） (07:07) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-exercise ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=111">
                    2-6 MarkMan 标注 PSD 文件 </a>


                <i class="sz-empty iright"></i>
            </li>
        </ul>
    </div>
    <div class="list-item">
        <h3>
            第3章 项目 JS 类开发
        </h3>
        <ul>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=170">
                    3-1 静态页思路验证-fullPage.js搭建一个简单切换页面 (12:30) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=118">
                    3-2 静态页思路验证-组件切换 (14:05) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=117">
                    3-3 JS类规划 (05:55) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=119">
                    3-4 通用图文组件类-H5ComponentBase（开发准备） (05:44) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=120">
                    3-5 通用图文组件类-H5ComponentBase（参数设置） (16:28) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=122">
                    3-6 CSS样式规划 (03:34) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=121">
                    3-7 通用图文组件类-H5ComponentBase（接受 onLoad、onLeave事件） (09:02) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=123">
                    3-8 内容组织类-H5（addPage方法） (17:25) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=124">
                    3-9 内容组织类-H5（addComponent方法） (10:57) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=125">
                    3-10 内容组织类-H5（整合fullPage.js） (06:23) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-exercise ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=112">
                    3-11 升级 H5ComponentBase 类支持相对定位 </a>


                <i class="sz-empty iright"></i>
            </li>
        </ul>
    </div>
    <div class="list-item">
        <h3>
            第4章 图表组件-散点图组件开发
        </h3>
        <ul>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=126">
                    4-1 图表组件开发介绍 (03:22) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=127">
                    4-2 散点图原理分析 (03:02) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=128">
                    4-3 散点图开发(散点图的比例值、颜色设置) (15:50) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=129">
                    4-4 散点图开发(位置设置) (07:38) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-exercise ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=113">
                    4-5 H5ComponentPoint 动画效果修改 </a>


                <i class="sz-empty iright"></i>
            </li>
        </ul>
    </div>
    <div class="list-item">
        <h3>
            第5章 图表组件-柱状图组件开发
        </h3>
        <ul>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=130">
                    5-1 柱图开发简介 (02:41) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=131">
                    5-2 水平柱图开发（HTML的DOM搭建） (18:41) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=133">
                    5-3 水平柱图开发（CSS样式编写） (08:27) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=132">
                    5-4 水平柱图开发（生长动画制作） (11:16) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-exercise ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=114">
                    5-5 H5ComponentBar扩展，垂直柱图实现 </a>


                <i class="sz-empty iright"></i>
            </li>
        </ul>
    </div>
    <div class="list-item">
        <h3>
            第6章 图表组件-折线图开发
        </h3>
        <ul>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=134">
                    6-1 折线图搭建折线图组件环境 (05:12) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=135">
                    6-2 折线图画布 (05:37) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=136">
                    6-3 折线图绘制网格线 (11:45) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=137">
                    6-4 折线图画点 (10:16) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=138">
                    6-5 折线图连线绘制数据 (07:12) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=139">
                    6-6 折线图绘制阴影 (05:38) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=140">
                    6-7 绘制项目名称 (08:36) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=141">
                    6-8 折线动画 (11:30) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=142">
                    6-9 项目名称动画 (04:08) </a>


                <i class="sz-empty iright"></i>
            </li>
        </ul>
    </div>
    <div class="list-item">
        <h3>
            第7章 图表组件-雷达图开发
        </h3>
        <ul>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=143">
                    7-1 雷达图开发（设计说明） (03:08) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=144">
                    7-2 雷达图开发（背景层开发） (17:51) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=145">
                    7-3 雷达图开发（数据层开发） (08:17) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=146">
                    7-4 雷达图开发（项目文本修正、生长动画） (10:06) </a>


                <i class="sz-empty iright"></i>
            </li>
        </ul>
    </div>
    <div class="list-item">
        <h3>
            第8章 图表组件-饼状图开发
        </h3>
        <ul>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=147">
                    8-1 饼图开发（绘制饼画准备） (06:13) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=149">
                    8-2 饼图开发（绘制饼图） (10:17) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=150">
                    8-3 饼图开发（绘制饼图动画） (03:43) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=148">
                    8-4 饼图开发（项目文本注入） (09:33) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-exercise ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=115">
                    8-5 H5ComponentPie 扩展，环图实现 </a>


                <i class="sz-empty iright"></i>
            </li>
        </ul>
    </div>
    <div class="list-item">
        <h3>
            第9章 项目前端页面整合开发
        </h3>
        <ul>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=151">
                    9-1 前端整合开发介绍 (03:41) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=152">
                    9-2 前端整合开发准备 (09:15) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=153">
                    9-3 图文组件页开发（首页整合开发） (13:44) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=154">
                    9-4 图文组件页开发（整合内容填充） (11:10) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=155">
                    9-5 图文组件页开发（尾页整合开发） (14:33) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=156">
                    9-6 图表组件页整合开发（一） (08:38) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=157">
                    9-7 图表组件页整合开发（二） (09:08) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=158">
                    9-8 图表组件页整合开发（三） (09:38) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=159">
                    9-9 图表组件页整合开发（四） (05:25) </a>


                <i class="sz-empty iright"></i>
            </li>
        </ul>
    </div>
    <div class="list-item">
        <h3>
            第10章 课程扩展
        </h3>
        <ul>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=160">
                    10-1 Loading 效果（简介） (04:39) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=161">
                    10-2 Loading 效果（HTML 结构搭建及 CSS 样式设置） (09:46) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=162">
                    10-3 Loading 效果（JS 脚本编写） (16:11) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=163">
                    10-4 饼图文本重排（简介） (08:19) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=164">
                    10-5 饼图文本重排（相交判定） (12:53) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=165">
                    10-6 饼图文本重排（重排） (14:09) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=395">
                    10-7 Ajax 获取 JSON 数据(上) (05:54) </a>


                <i class="sz-empty iright"></i>
            </li>
            <li class="">
                <i class="imv2-video ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=397">
                    10-8 Ajax获取 JSON 数据(下) (13:32) </a>


                <i class="sz-empty iright"></i>
            </li>
        </ul>
    </div>
    <div class="list-item">
        <h3>
            第11章 大任务-综合实战
        </h3>
        <ul>
            <li class="">
                <i class="imv2-exercise ileft"></i>
                <a target="_blank" href="/lesson/15.html#mid=236">
                    11-1 实现一个完整的手机端数据展示报告 </a>


                <i class="sz-empty iright"></i>
            </li>
        </ul>
    </div>

    <div class="chapter-update-state clearfix">
        <i class="imv2-check"></i>
        <span>本课程已完结</span>
    </div>
</div>
</body>
</html>